<!DOCTYPE html>
<html>
<head>
	<title>实名认证 -- 小跳蛙快递驿站服务平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link href="../../backend/css/normalize.css" type="text/css" rel="stylesheet" />
	<link href="../../backend/css/common.css" type="text/css" rel="stylesheet" />
	<script src="../../backend/js/jquery.min.js" type="text/javascript"></script>
	<script src="../../backend/js/common.js" type="text/javascript"></script>
	<script src="../../backend/js/notice.js" type="text/javascript"></script>
	<script src="../../backend/js/regexp.js" type="text/javascript"></script>
	<script src="../../backend/js/jweixin-1.2.0.js" type="text/javascript"></script>
	<script src="../../backend/layer/layer.js"></script>
	<style type="text/css">
		.content{
			overflow: hidden;
		}
		.userCheckCont{
			width: 100%;
		}
		.userInfoCont{
			overflow: hidden;
			padding: 40px 0px 20px;
			background-image: linear-gradient(to top,#1bb7c3,#f4f4f4);
			box-shadow: 0px 3px 3px #c1c1c1;
		}
		.userInfoCont  .userInfoIcon{
			width: 18%;
			margin: 0px auto 10px;
		}
		.userInfoCont  .nickName{
			font-size: 14px;
			text-align: center;
			font-weight: bold;
			color: #fff;
		}

		.solidCont{
			width: 200%;
			overflow: hidden;
		}
		.checkState{
			width: 50%;
			margin:30px 0px;
			float: left;
		}
		.checkState .stateIcon{
			width: 30px;
			margin: 0 auto;
		}
		.checkState .checkStateTxt{
			text-align: center;
			font-size: 14px;
			padding: 5px 0px;
			color: #333333;
			font-weight: bold;
			margin-bottom: 50px;
		}
		.checkState .checkBtn{
			width: 80%;
			line-height: 40px;
			margin: 5px auto;
			font-weight: bold;
			text-align: center;
			color: #20d6da;
			border: 2px solid #20d6da;
			border-radius: 20px;
		}
		.checkState .checkprompt{
			font-size: 14px;
			text-align: center;
			color: #888888;
			margin: 8px 0px 0px;
		}

		.infoCheckEditCont{
			width: 50%;
			float: left;
			padding-top: 20px;
			overflow:auto;
		}

		.submitBtn,.backBtn{
			width: 90%;
			margin: 0 auto 20px;
			text-align: center;
			line-height: 46px;
			border-radius: 23px;
			color: #20d6da;
			border: 2px solid #20d6da;
			font-weight: bolder;
		}

		#oldPhone{
			display: none;
		}

		/* userIdImg css */
		.userIdImgUpload{
			width: 90%;
			margin: 0 auto 20px;
			overflow: hidden;
		}
		.userIdImgUpload .userIdImgCont{
			width: 100%;
			overflow: hidden;
			border-radius: 8px;
			border: 1px solid #e1e1e1;
			background: #fff;
		}
		.userIdImgUpload .userIdImgCont img{
			width: 100%;
			display: block;
			margin: 0 auto;
		}
		.userIdImgUpload .userIdImgCont .userIdImgUploadDesc{
			margin: 0px;
			line-height: 30px;
			font-size: 14px;
			color: #999999;
			font-weight: bold;
			text-align: center;
		}


		.userUploadDesc{
			width: 90%;
			font-size: 14px; 
			color: #999999;
			margin: 0 auto 20px;
		}
		
		.imageCover{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.8);
			display: none;
		}

	</style>
</head>
<body>
<div class="headerNav">
	<div class="headerNavTop"><div class="headerNavIcon headerNavIconOut"><span></span><span></span></div></div>
	<div class="headerNavCont">
		<a href="../../front/view/index.html">快递首页</a>
		<a href="../../front/view/wxUserhome.html">个人中心</a>
		<a href="../../front/view/delivery.html">送货上门</a>
		<a href="../../front/view/sendexpress.html">我要寄件</a>
		<a href="../../front/view/lazyboard.html">懒人排行</a>
		<a href="../../front/view/expressAssist.html">快递助手</a>
	</div>
</div>
	<div class="content">
    
    <input id="timestamp" type="hidden" value="${timestamp}" />
	<input id="noncestr" type="hidden" value="${nonceStr}" />
	<input id="signature" type="hidden" value="${signature}" />
	<input id="appId" type="hidden" value="${appId}" />
	
	<div class="userCheckCont">
		<div class="userInfoCont">
			<div class="userInfoIcon">
				<img src="../../backend/images/userInfoIcon.png" width="100%">
			</div>
			<div class="nickName">用户认证</div>
		</div>
	</div>
	
	<div class="solidCont">
		<div class="checkState">
			<div class="stateIcon">
				<img src="../../backend/images/uncheckIcon.png" width="100%">
			</div>
			<div class="checkStateTxt">未认证</div>
			
			<!-- 按钮组 -->
			<div class="checkBtn userRegBtn">新用户认证</div>
			<div class="checkprompt">认证通过开启信息化校园快递</div>
		</div>

		<div class="infoCheckEditCont" id="newUserReg">
			<form>
				<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
				<input id="wxCode" type="hidden" value="${wxCode}" />
				<div class="userInputCont">
					<div class="inputTypeCont">
						<div class="inputTitle">姓名</div>
						<input type="text" id="name" class="commonInput" name="name" placeholder="请输入你的姓名...">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">手机</div>
						<input type="text" id="phone" class="commonInput" name="phone" placeholder="请输入你的手机号码...">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">密码</div>
						<input type="text" id="password" class="commonInput" name="password" placeholder="请输入你的密码">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">短信</div>
						<input type="text" id="msg" class="verifiInput" name="msg" placeholder="请输入验证码...">
						<input type="button" class="verifiBtn" value="发送验证码" onclick="sendMessage()">
					</div>
					
				</div>
			</form>
			<div id = "userRegSubmitBtn" class="submitBtn userRegSubmitBtn">确认提交</div>
			<div class="backBtn">点我返回</div>
		</div>
	</div>
	
	<div class="imageCover">
		<div class="coverCont">
			<img src="../../backend/images/useridimage.jpg" width="100%">
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function() {
		var pageContextVal = $("#PageContext").val();
		var wxCodeVal = $("#wxCode").val();
		var windowW = $(window).width();
		var windowH = $(window).height();
		if (windowW > 600) {
			windowW = 600;
		}
		
		var topH = $(".userCheckCont").height();
		$(".solidCont").css({"height":(windowH - topH) + "px"});
		$(".infoCheckEditCont").css({"height":(windowH - topH - 30) + "px"});
		
		// cover
		var contentH = $(".content").height();
		$(".imageCover").css({"height":contentH + "px"});

		// 样例图片展示  501*377
		var imageH = windowW * 377 / 501; 
		$(".coverCont").css({"margin-top":(windowH - imageH)/2 + "px"});

		$(".imageCover").click(function(){
			$(".imageCover").fadeOut();
		});
		
		$(".solidCont").css({"margin-left":0+"px"});

		$(".userRegBtn").click(function(){
			$(".solidCont").animate({"margin-left":-windowW+"px"},"fast");
		});

		$(".backBtn").click(function(){
			$(".solidCont").animate({"margin-left":0+"px"},"fast");
		});
		// 提交保存
		$("#userRegSubmitBtn").click(function() {
			if($("#name").val().trim()===""||$("#phone").val().trim()===""||$("#password").val().trim()===""
			|| $("#msg").val().trim()===""){
				layer.msg("信息缺失，无法认证")
			}
			else{
				var windowId = layer.load(2);
				$.post("/wx/check.do",{
					name:$("#name").val(),
					phone:$("#phone").val(),
					password:$("#password").val(),
					code:$("#msg").val(),
				},function(data){
					console.log(data);
					if(data.data === 'success'){
						layer.msg("用户认证成功");
					}else{
						layer.msg("未知异常，用户认证失败");
					}
					layer.close(windowId);
				},"JSON");
			}
		});
	});

	var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
	var count = 30;
	var InterValObj1;
	var curCount1;
	function sendMessage() {
		curCount1 = count;
		var phone1 = $.trim($('#phone').val());
		if (!phoneReg.test(phone1)) {
			alert(" 请输入有效的手机号码");
			return false;
		}

		$("#verifiBtn").attr("disabled", "true");
		$("#verifiBtn").val( + curCount1 + "秒再获取");
		InterValObj1 = window.setInterval(SetRemainTime1, 1000);
		//发送短信
		var windowId = layer.load();
		$.getJSON("/wx/updateSms.do",{userPhone:phone1},function(data){
			//{status:0/1,result:"成功/失败"}
			layer.close(windowId);
			layer.msg(data.result);
		})
	}
	function SetRemainTime1() {
		if (curCount1 == 0) {
			window.clearInterval(InterValObj1);
			$("#verifiBtn").removeAttr("disabled");
			$("#verifiBtn").val("重新发送");
		}
		else {
			curCount1--;
			$("#verifiBtn").val( + curCount1 + "秒再获取");
		}
	}
</script>
</body>
</html>